<template>
  <div class="addAddress">
    <header>
      <img src="../../assets/img/zuojiantou.png" alt="" @click="back">
      新增收货地址
      <div class="complete" @click="addAddress">完成</div>
    </header>

    <!--  位置详细信息    -->
    <div class="detailed">
      <div class="addressInfo">
        <p>收货人</p>
        <input type="text" placeholder="请填写姓名" v-model="userName" >
      </div>
      <div class="addressInfo">
        <p>联系电话</p>
        <input type="text" maxlength="11" placeholder="请填写联系电话"
               v-model="tel" >
      </div>
      <div class="addressInfo addressInfo1">
        <p>配送地址</p>
        <van-cell is-link @click="showPopup" class="lq-address">{{showAddr?showAddr:'请选择省、市、区'}}</van-cell>
        <p style="width: .6rem;color: #AAAAAA;margin-right: 0" @click="getAddress">
          <span>定位</span>
          <img src="../../../static/img/address_1.png" alt="">
        </p>



        <!--            <v-distpicker type="mobile" :province="select.province" :city="select.city" :area="select.area"></v-distpicker>-->
        <!-- 上滑进入 -->
      </div>
      <div class="streeTinfo">
        <textarea name="" id="" cols="30" rows="10" placeholder="请填写详细地址(街道、楼牌号等)"
                  v-model="addressInfo" ></textarea>
      </div>
    </div>
    <!--  隔断条    -->
    <div class="partition"></div>
    <div class="setMr">
      <p :class="`${checked?'mr':''}`">{{checked?'已设为默认地址':'设为默认地址'}}</p>
      <van-switch :value="checked" @input="onInput" @change="change" size=".24rem" active-color="#ff8b3c"/>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-area
              :area-list="areaList"
              title="选择地址"
              @change="changeAddr"
              @cancel="cancelChoose"
              @confirm="chooseThis"
      />
    </van-popup>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker';
  import Vue from 'vue';
  import {Area} from 'vant';
  import {cell} from "vant"
  import {Popup} from 'vant';

  Vue.use(Popup);
  Vue.use(cell);
  Vue.use(Area);
  import qs from "qs";
  import address from "../../../static/data/address/address.js";
  export default {
    name: "addAdress",
    data() {
      return {
        areaList: address,
        checked: false,
        visible: false,
        show: false,
        showAddr: this.$route.query.data?this.$route.query.data.dispatching:'',      //显示地址
        resAddr: '',       //传给后端的位置信息
        userName:this.$route.query.data?this.$route.query.data.name:'', // 收货人
        tel:this.$route.query.data?this.$route.query.data.phone:'', // 联系电话
        addressInfo:this.$route.query.data?this.$route.query.data.particular:'', // 详细地址
        type:0, // 是否为默认地址
      }
    },
    components: {
      VDistpicker
    },
    created() {
      if (this.$route.query.data) {
        if (this.$route.query.type == 1) {
          this.onInput(true);
        }
      }
    },
    mounted() {
      if (this.$route.query.data) {
        console.log(this.$route.query.type )
        if (this.$route.query.type == 1) {
          this.onInput(true);
        }
      }
    },
    methods: {
      showPopup() {
        this.show = true
      },
      //改变地址选择，当切换省市区时进行数据留存
      changeAddr(picker) {
        //value=0改变省，1改变市，2改变区
        let val = picker.getValues()
        this.resAddr = val
      },
      //选好地址后点击确定
      chooseThis() {
        this.show = false
        //选中地址成功后回显
        if (!this.resAddr[0] || !this.resAddr[1] || !this.resAddr[2]) {
          return;
        }
        this.showAddr = this.resAddr[0].name + '-' + this.resAddr[1].name + '-' + this.resAddr[2].name
        console.log(this.resAddr, '即将传给后端的省市区信息')
      },
      cancelChoose() {
        this.show = false;
      },
      onInput(look = false) {
        this.checked = look;
      },
      // 开关状态改变
      change(val){
        if (val) {
          this.type = 1;
        } else {
          this.type = 0;
        }
        console.log(this.type)
      },
      back() {
        this.$router.back();
      },
      addAddress(){
        console.log(this.resAddr);
        var resUname = /^1[3-9][0-9]{9}$/;
        if (resUname.test(this.tel) && this.userName && this.addressInfo && this.showAddr) {
          if (this.$route.query.data){
            // 修改地址
            this.$myAxios('index/address/address_update','post',{
              id:this.$route.query.data.id,
              user_id:this.$store.state.userInfo.id,
              name:this.userName,
              phone:this.tel,
              dispatching:this.showAddr,
              particular:this.addressInfo,
              type:this.type
            }).then(res=>{
              if (res.data.state == 1) {
                this.$router.back();
              }else {
                this.$myNotice('请检查网络~',1500);
              }
            })
          } else {
            // 添加地址
            this.$myAxios('index/address/address_add','post',{
              user_id:this.$store.state.userInfo.id,
              name:this.userName,
              phone:this.tel,
              dispatching:this.showAddr,
              particular:this.addressInfo,
              type:this.type
            }).then(res=>{
              if (res.data.state == 1) {
                this.$router.back();
              }else {
                this.$myNotice('请检查网络~',1500);
              }
            })
          }
        }else {
          this.$myNotice('请检查信息是否有误!',1500)
        }
      },
      // 获取当前定位信息
      getAddress(){
        var vThis = this;
        this.$nextTick(res=>{
          // 获取当前详细位置信息
          new BMap.Geolocation().getCurrentPosition(
                  function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                      //通过Geolocation类的getStatus()可以判断是否成功定位。
                      console.info(r.point);
                      new BMap.Geocoder().getLocation(r.point, function (rs) {
                        var addComp = rs.addressComponents;
                        console.info(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber)
                        vThis.showAddr = addComp.province + addComp.city + addComp.district;
                      });
                    }
                  },
                  {enableHighAccuracy: true}
          );
        })
      }
    },
    watch:{
      userName(){
        this.userName = this.userName.replace(/\s+/g,'');
      },
      addressInfo(){
        this.addressInfo = this.addressInfo.replace(/\s+/g,'');
      },
      tel(){
        if (this.tel.length == 11 && !/^1[3-9][0-9]{9}$/.test(this.tel)){
          this.$myNotice('请收入正确的手机号!',1500)
        }
      }
    }
  }
</script>

<style scoped>
  .addAddress {
    padding-top: .5rem;
  }

  input {
    font-size: .15rem;
  }

  .addAddress header {
    width: 100%;
    position: fixed;
    top: -.01rem;
    left: 0;
    z-index: 999;
    height: .51rem;
    background-image: url("../../../static/img/pt_juxing.png");
    background-size: cover;
    color: #ffffff;
    text-align: center;
    line-height: .5rem;
    font-size: .18rem;
  }

  .addAddress header img {
    width: .10rem;
    height: .18rem;
    position: absolute;
    left: .13rem;
    top: calc(50% - .09rem);
  }

  .complete {
    height: 100%;
    position: absolute;
    line-height: .5rem;
    top: 0;
    right: .15rem;
    font-size: .16rem;
    color: #FFFFFF;
    font-weight: 400;
  }

  /* 定位部分 */
  .thisPositon {
    width: 100%;
    height: .5rem;
    text-align: center;
  }

  .thisPositon img {
    width: .14rem;
    height: .18rem;
    vertical-align: middle;
    margin-right: .13rem;
  }

  .wzInfo {
    font-size: .15rem;
    color: #FF7611;
    display: inline-block;
    vertical-align: middle;
    line-height: .5rem;
  }

  .partition {
    width: 100%;
    height: .08rem;
    background: rgba(244, 243, 248, 1);
  }

  /* 详细位置信息 */
  .detailed {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .13rem;
  }

  .addressInfo {
    width: 100%;
    height: .5rem;
    border-bottom: .01rem solid rgba(244, 244, 244, 1);
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .addressInfo p {
    width: .8rem;
    font-size: .15rem;
    color: #333333;
    font-weight: 500;
    text-align: left;
    margin-right: .3rem;
  }

  .addressInfo input {
    color: #333333;
    border: none;
    outline: none;
  }

  input::-webkit-input-placeholder {
    font-size: .15rem;
    color: #AAAAAA;
  }

  .streeTinfo {
    width: 100%;
    box-sizing: border-box;
    padding: .3rem 0;
  }

  .streeTinfo input {
    width: 100%;
    border: none;
    outline: none;
  }

  .streeTinfo textarea {
    width: 100%;
    border: none;
    outline: none;
    font-size: .15rem;
    height: .5rem;
    resize: none;
  }
  .addressInfo1 {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .addressInfo1>p:nth-child(3) {
    display: flex;
    flex-flow: row;
    align-items: center;
    padding-left: .02rem;
  }
  .addressInfo1>p:nth-child(3)>img {
    width: .14rem;
    height: .18rem;
    margin-left: .13rem;
  }
  .addressInfo1>p:nth-child(3)>span {
    font-size: .14rem;
  }

  /* 默认地址按钮 */
  .setMr {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .13rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .setMr p {
    font-size: .15rem;
    color: #333333;
  }

  .mr {
    color: #FF7611 !important;
  }

  /* 三级联动插件自适应处理 */
  >>> .van-cell {
    color: #999999 !important;
    font-size: .15rem;
    padding: 0;
    line-height: .24rem;
  }

  >>> .van-popup {
    height: 2.7rem !important;
  }

  >>> .van-picker__columns {
    height: 2.2rem !important;
  }

  >>> .van-picker-column__wrapper > li {
    height: .44rem !important;
    line-height: .44rem !important;
  }

  >>> .van-picker-column {
    font-size: .16rem !important;
  }

  >>> .van-picker__toolbar {
    height: .44rem;
    line-height: .44rem;
  }

  >>> .van-picker__cancel {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__confirm {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__title {
    font-size: .16rem;
  }
  >>> .van-cell__right-icon {
    margin-left: .05rem;
    height: .24rem;
    font-size: .16rem;
    line-height: .24rem;
  }
  >>> .van-cell::after {
    border: none;
  }

 /* 开关自适应处理 */
  >>> .el-switch {
    font-size: .14rem;
    line-height: .2rem;
    height: .2rem;
  }
  >>> .el-switch__core {
    width: .45rem !important;
    border: .01rem solid #DCDFE6;
    border-radius: .1rem;
    height: .2rem;
  }
  >>> .el-switch__core:after {
    top: .01rem;
    width: .16rem;
    height: .16rem;
  }

  .lq-address {
    width: calc(100% - 1.7rem);
  }
</style>
